<template>
  <div id="loginDiv">
    <div class="loginbox" v-if="!show">
      <h2>智慧物业登录系统</h2>
      <form>
        <div class="user-box">
          <input type="text" @change="staffNumber" name="" required="" placeholder="          请输入手机号" v-model="loginForm.staffNumber">
          <label>账户</label>
        </div>
        <div class="user-box">
          <input type="password" name="" placeholder="          请输入密码" required="" v-model="loginForm.password">
          <label>密码</label>
        </div>
        <a @click="handleSubmit" style="margin-left: 20px">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          登录
        </a>
        <a @click="GoRegister" style="margin-left: 40px">注册账号 </a>
      </form>
    </div>
    <div class="loginbox" v-if="show">
      <h2>智慧物业注册系统</h2>
      <form>
        <div class="user-box">
          <input type="text" name="" @change="checkPhone" required="" v-model="registerForm.staffNumber">
          <label>请输入账户</label>
        </div>
        <div class="user-box">
          <input type="password" name="" required="" v-model="registerForm.password">
          <label>请输入密码</label>
        </div>
        <div class="user-box">
          <input type="password" name="" required="" v-model="registerForm.twopassword">
          <label>再次请输入密码</label>
        </div>
        <a @click="register" style="margin-left: 20px">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          注册
        </a>
        <a @click="BackLogin" style="margin-left: 40px">返回登录 </a>
      </form>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Login',
  data () {
    return {
      show: false,
      obj: false,
      registerForm: {
        staffNumber: '',
        password: '',
        twopassword: ''
      },
      rest: {
        staffNumber: '',
        password: '',
        twopassword: ''
      },
      loginForm: {
        staffNumber: '',
        password: ''
      }
    }
  },
  mounted () {
  },
  methods: {
    staffNumber (){ // 手机号格式校验
      this.obj = false
      const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
      if(!reg.test(this.loginForm.staffNumber)){
        this.MyMessage('请输入正确的电话号码!', 'error')
      } else {
        this.obj = true
      }
    },
    checkPhone (){ // 手机号格式校验
      this.obj = false
      const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
      if(!reg.test(this.registerForm.staffNumber)){
        this.MyMessage('请输入正确的电话号码!', 'error')
      } else { // 账户查重
        this.$axios.get('/memberCjq/login/listStaffNumber', {
          params: {
            staffNumber: this.registerForm.staffNumber
          }
        }).then(res => {
          if (res.data.obj.flag){
            this.obj = true
          } else {
            this.MyMessage(res.data.obj.obj, 'warning')
          }
        })
      }
    },
    register () {
      if (this.obj) {
        if (this.registerForm.staffNumber === '') {
          this.MyMessage('账户不能为空', 'warning')
        } else {
          if (this.registerForm.password === '') {
            this.MyMessage('密码不能为空', 'warning')
          } else {
            if (this.registerForm.password !== this.registerForm.twopassword) {
              this.MyMessage('两次输入的密码不同', 'warning')
            } else {
              this.$axios.post('/memberCjq/login/register', this.registerForm).then(res => {
                if (res.data.code === 200) {
                  this.MyMessage('注册成功,请重新登录!', 'success')
                  this.insetrLog('后台注册')
                  this.show = false
                } else {
                  this.MyMessage('注册失败，请联系管理员!', 'warning')
                }
              })
            }
          }
        }
      } else {
        this.MyMessage('账户不符合规则，请重新输入！', 'error')
      }
    },
    GoRegister () {
      this.registerForm = this.rest
      this.show = true
    },
    BackLogin () {
      this.loginForm = this.rest
      this.show = false
    },
    handleSubmit () {
      if (this.obj) {
        if (this.loginForm.staffNumber === '' || this.loginForm.password === '') {
          this.MyMessage('账号或密码为空', 'error')
        } else {
          this.$axios.post('/memberCjq/login/login', this.loginForm).then(res => {
            if (res.data.obj.flag) {
              window.localStorage.setItem('user',JSON.stringify(res.data.obj.obj))
              this.MyMessage('登录成功', 'success')
              this.$router.push('/village')
            } else {
              this.MyMessage(res.data.obj.obj, 'warning')
            }
          })
        }
      } else {
        this.MyMessage('账户不符合规则，请重新输入！', 'error')
      }
    },
    MyMessage (msg, type) {
      this.$notify({
        showClose: true,
        message: msg,
        type: type
      })
    }
  }
}

</script>

<style>
#box111{
  width:40px;
  z-index: 999;
  height:40px;
  position: absolute;
  background:url('/src/assets/xiyi.png')center center / cover no-repeat;
}
a{
  cursor: pointer;
}
*{
  margin: 0;
  padding: 0;
}
#loginDiv {
  width: 100%;
  height: 100%;
  background: url("/src/assets/背景.jpg")center center / cover no-repeat;
  background-size: cover;
  position: absolute;
  overflow: hidden;
}

.loginbox {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  padding: 40px;
  transform: translate(-50%, -50%);
  background: rgba(164, 172, 175, 0.5);
  box-sizing: border-box;
  box-shadow: 0 15px 25px rgba(174, 164, 184, 0.6);
  border-radius: 10px;
}

.loginbox h2 {
  margin: 0 0 30px;
  padding: 0;
  color: #fff;
  text-align: center;
}

.loginbox .user-box {
  position: relative;
}

.loginbox .user-box input {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
}

.loginbox .user-box label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  pointer-events: none;
  transition: .5s;
}

.loginbox .user-box input:focus ~ label,
.loginbox .user-box input:valid ~ label {
  top: -20px;
  left: 0;
  color: #03e9f4;
  font-size: 12px;
}

.loginbox form a {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #03e9f4;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: .5s;
  margin-top: 40px;
  letter-spacing: 4px
}

.loginbox a:hover {
  background: #03e9f4;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px #03e9f4,
  0 0 25px #03e9f4,
  0 0 50px #03e9f4,
  0 0 100px #03e9f4;
}

.loginbox a span {
  position: absolute;
  display: block;
}

.loginbox a span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #03e9f4);
  animation: btn-anim1 1s linear infinite;
}

@keyframes btn-anim1 {
  0% {
    left: -100%;
  }
  50%, 100% {
    left: 100%;
  }
}

.loginbox a span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #03e9f4);
  animation: btn-anim2 1s linear infinite;
  animation-delay: .25s
}

@keyframes btn-anim2 {
  0% {
    top: -100%;
  }
  50%, 100% {
    top: 100%;
  }
}

.loginbox a span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #03e9f4);
  animation: btn-anim3 1s linear infinite;
  animation-delay: .5s
}

@keyframes btn-anim3 {
  0% {
    right: -100%;
  }
  50%, 100% {
    right: 100%;
  }
}

.loginbox a span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #03e9f4);
  animation: btn-anim4 1s linear infinite;
  animation-delay: .75s
}

@keyframes btn-anim4 {
  0% {
    bottom: -100%;
  }
  50%, 100% {
    bottom: 100%;
  }
}
</style>
